<template>
	<uni-popup ref="popup">
		<view class="bg-white rounded p-5 main">
			<!-- 图像上传-->
			<view class="avatar flex align-center justify-center">
				<uni-file-picker v-model="avatar" return-type="object" limit="1" mode="grid" file-mediatype="image"
					:image-styles="avatarStyles" @success="onAvatarUploadSuccess" @fail="onAvatarUploadFail"
					@delete="onAvatarUploadDelete">

					<view class="avatarSeat input-bg-color flex align-center justify-center">封面</view>
				</uni-file-picker>
			</view>

			<view class="my-2 position-relative">
				<uni-easyinput class="input-bg-color rounded" :input-border="false" v-model="title" placeholder="标题"
					maxlength="10"></uni-easyinput>
				<text class="position-absolute title-tip secondary-color font-sm">10/{{title.length}}</text>

			</view>


			<view class="my-2 position-relative">
				<uni-easyinput class="input-bg-color rounded" type="textarea" :input-border="false" v-model="desc"
					placeholder="描述" maxlength="20"></uni-easyinput>
				<text class="position-absolute desc-tip secondary-color font-sm">20/{{desc.length}}</text>

			</view>

			<c-button class="main-bg-color my-2 text-white" @on-tap="release" :disabled="disabled">发布</c-button>
		</view>
	</uni-popup>
</template>

<script>
	import {
		lockMixin
	} from "@/common/js/mixin.js"
	export default {
		mixins: [lockMixin],
		data() {
			return {
				title: "",
				desc: "",
				coverUploadStatus: false,
				avatar: [],
				avatarStyles: {
					height: 120,
					width: 120,
					border: {
						width: "1px",
						style: "solid",
						radius: "8px"
					}
				},
			}
		},
		computed: {
			disabled() {
				const hasTitle = this.title.length > 0
				const abled = hasTitle && this.coverUploadStatus
				return !abled
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			release() {
				if (!this.heldStatus) {
					this.lock()
					const events = {
						start:()=>this.$U.loading(),
						success: () => {
							this.title = ""
							this.desc = ""
							this.avatar = []
							this.$refs.popup.close()
						},
						fail:msg=>{
							this.$U.notice(msg)
						},
						complete: () => {
							this.$U.hideLoading()
							this.unlock()
						}
					}

					this.$emit("release", {
						cover: this.avatar,
						title: this.title,
						desc: this.desc
					}, events)
					this.unlock()
				}
			},
			onAvatarUploadSuccess() {
				this.coverUploadStatus = true
				this.$U.notice("封面上传成功")
			},
			onAvatarUploadFail() {
				this.coverUploadStatus = false
				this.$U.notice("封面上传失败")
			},
			onAvatarUploadDelete() {
				this.coverUploadStatus = true
				this.$U.notice("封面删除成功")
			},
		}
	}
</script>

<style scoped>
	.main {
		width: 550rpx
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.avatarSeat {
		width: 100%;
		height: 100%;
	}

	.title-tip {
		top: 15rpx;
		right: 60rpx;
	}

	.desc-tip {
		top: 10rpx;
		right: 60rpx;
	}
</style>